<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Legend Example (DOM Legends) | heatmap.js</title>
    <style>
      body, html, h2 { margin:0; padding:0; height:100%;}
      body { font-family:sans-serif; }
      body * { font-weight:200;}
      #heatmapContainerWrapper { width:100%; height:100%; position:absolute; background:rgba(0,0,0,.1); }
      #heatmapContainer { width:100%; height:100%;}
      #heatmapLegend { background:white; position:absolute; bottom:0; right:0; padding:10px; }
      #min { float:left; }
      #max { float:right; }
      h1 { position:absolute; background:black; color:white; padding:10px; font-weight:200;}
      #all-examples-info { position:absolute; background:white; font-size:16px; padding:20px; top:100px; width:350px; line-height:150%; border:1px solid rgba(0,0,0,.2);}
    </style>
  </head>
  <body>
    <div id="heatmapContainerWrapper">
      <div id="heatmapContainer">

      </div>
      <div id="heatmapLegend">
        <h2>Descriptive Legend Title</h2>
        <span id="min"></span>
        <span id="max"></span>
        <img id="gradient" src="" style="width:100%" />
      </div>
    </div>
       <h1>Adding a custom legend to heatmap.js</h1>
        <div id="all-examples-info">
          <strong style="font-weight:bold;line-height:200%;font-size:18px;">Looking for more examples?</strong> <br />Check out the full <a href="http://www.patrick-wied.at/static/heatmapjs/examples.html?utm_source=gh_local" target="_blank">list of all heatmap.js examples</a> with more pointers &amp; inline documentation.
        </div>
    <script src="/build/heatmap.js"></script>
    <script>
      window.onload = function() {
        // helper function
        function $(id) {
          return document.getElementById(id);
        };

        /*  legend code */
        // we want to display the gradient, so we have to draw it
        var legendCanvas = document.createElement('canvas');
        legendCanvas.width = 100;
        legendCanvas.height = 10;

        var legendCtx = legendCanvas.getContext('2d');
        var gradientCfg = {};

        function updateLegend(data) {
          // the onExtremaChange callback gives us min, max, and the gradientConfig
          // so we can update the legend
          $('min').innerHTML = data.min;
          $('max').innerHTML = data.max;
          // regenerate gradient image
          if (data.gradient != gradientCfg) {
            gradientCfg = data.gradient;
            var gradient = legendCtx.createLinearGradient(0, 0, 100, 1);
            for (var key in gradientCfg) {
              gradient.addColorStop(key, gradientCfg[key]);
            }

            legendCtx.fillStyle = gradient;
            legendCtx.fillRect(0, 0, 100, 10);
            $('gradient').src = legendCanvas.toDataURL();
          }
        };
        /* legend code end */


        // create a heatmap instance
        var heatmap = h337.create({
          container: document.getElementById('heatmapContainer'),
          maxOpacity: .5,
          radius: 10,
          blur: .75,
          // update the legend whenever there's an extrema change
          onExtremaChange: function onExtremaChange(data) {
            updateLegend(data);
          }
        });

        // boundaries for data generation
        var width = (+window.getComputedStyle(document.body).width.replace(/px/,''));
        var height = (+window.getComputedStyle(document.body).height.replace(/px/,''));

        // generate 1000 datapoints
        var generate = function() {
          // randomly generate extremas
          var extremas = [(Math.random() * 1000) >> 0,(Math.random() * 1000) >> 0];
          var max = Math.max.apply(Math, extremas);
          var min = Math.min.apply(Math,extremas);
          var t = [];


          for (var i = 0; i < 1000; i++) {
            var x = (Math.random()* width) >> 0;
            var y = (Math.random()* height) >> 0;
            var c = ((Math.random()* max-min) >> 0) + min;
            // btw, we can set a radius on a point basis
            var r = (Math.random()* 80) >> 0;
            // add to dataset
            t.push({ x: x, y:y, value: c, radius: r });
          }
          var init = +new Date;
          // set the generated dataset
          heatmap.setData({
            min: min,
            max: max,
            data: t
          });
          console.log('took ', (+new Date) - init, 'ms');
        };
        // initial generate
        generate();

        // whenever a user clicks on the ContainerWrapper the data will be regenerated -> new max & min
        document.getElementById('heatmapContainerWrapper').onclick = function() { generate(); };

      };
    </script>
  </body>
</html>